<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Cadastro Cliente"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <fieldset>
                <h:form id="cadastroCliente">
                    <legend align="left"><h:outputText value="Cadastro de Cliente"/></legend>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Nome:" for="nome" />
                        </div>
                        <div class="col-md-5" align="left">
                            <p:inputText id="nome" value="#{clienteController.selected.nome}" title="Nome" required="true" requiredMessage="Nome obrigatório" size="50"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Data:" for="dataCadastro" />
                        </div>
                        <div class="col-md-5" align="left">
                            <p:inputText id="dataCadastro" value="#{clienteController.selected.dataCadastro}" title="Data cadastro"
                                         readonly="true" required="true" requiredMessage="Informe a data">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:inputText>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3" align="center">
                            <p:spacer width="10" height="10"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <p:commandLink id="addTelefone" immediate="true" update=":cadastroTelefone">   
                                <h:graphicImage library="img" name="add.png" width="20" height="20"/>
                                <h:outputText value="Tel:"/>
                                <f:setPropertyActionListener target="#{clienteController.showTelefone}" value="#{true}"/>
                            </p:commandLink>
                        </div>
                        <div class="col-md-5" align="left">
                            <h:panelGroup id="telefones">
                                <ui:repeat value="#{clienteController.telefone}" var="tel" >
                                    <h:outputText value="#{tel.tipo} (#{tel.ddd})#{tel.telefone}"/>&nbsp;<h:commandLink action="#{clienteController.removerTelefone(tel)}" value="Remover" immediate="true"/>
                                </ui:repeat>
                            </h:panelGroup>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3" align="left">
                            <p:spacer width="10" height="20"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <p:commandLink id="addEndereco" immediate="true" update=":formEndereco">   
                                <h:graphicImage library="img" name="add.png" width="20" height="20"/>
                                <h:outputText value="End:"/>
                                <f:setPropertyActionListener target="#{clienteController.showEndereco}" value="#{true}"/>
                            </p:commandLink>
                        </div>
                        <div class="col-md-10" align="left">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>
                                            <h:outputText value="Logradouro"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Nome Logradouro"/>
                                        </th>
                                        <th>
                                            <h:outputText value="CEP"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Bairro"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Número"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Cidade"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Estado"/>
                                        </th>
                                        <th>
                                            <h:outputText value="Complemento"/>
                                        </th>
                                        <th>
                                            <h:outputText value=""/>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <h:panelGroup id="enderecos">
                                        <ui:repeat value="#{clienteController.endereco}" var="item">
                                            <tr>
                                                <td align="left"><h:outputText value="#{item.logradouro.label}"/></td>
                                                <td align="left"><h:outputText value="#{item.nome}"/></td>
                                                <td align="left"><h:outputText value="#{item.cep}"/></td>
                                                <td align="left"><h:outputText value="#{item.bairro}"/></td>
                                                <td align="left"><h:outputText value="#{item.numero}"/></td>
                                                <td align="left"><h:outputText value="#{item.cidade}"/></td>
                                                <td align="left"><h:outputText value="#{item.estado}"/></td>
                                                <td align="left"><h:outputText value="#{item.complemento}"/></td>
                                                <td align="left"><h:commandLink action="#{clienteController.removerEndereco(item)}" value="Remover" immediate="true"/></td>
                                            </tr>
                                        </ui:repeat>
                                    </h:panelGroup>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <h:panelGrid columns="5" >
                        <h:commandButton styleClass="btn btn-mini btn-primary" action="#{clienteController.update}" value="Atualizar Cliente" rendered="#{clienteController.selected.id ne null}"/>
                        <p:spacer width="10" height="10"/>
                        <h:commandButton styleClass="btn btn-mini btn-primary" action="#{clienteController.create}" value="Salvar Cliente" rendered="#{clienteController.selected.id eq null}"/>
                        <p:spacer width="10" height="10"/>
                        <h:commandButton styleClass="btn btn-mini btn-primary" action="#{clienteController.prepareList}" value="Cancelar" immediate="true"/>
                    </h:panelGrid>
                </h:form>
            </fieldset>

            <h:form id="cadastroTelefone" >
                <h:panelGroup rendered="#{clienteController.showTelefone}">
                    <div class="row">
                        <div class="col-md-5" align="center">
                            <h:outputText value="Cadastro Telefone" style="font-size: large;"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputText value="Tipo:"/>
                        </div>
                        <div class="col-md-5" align="left">
                            <h:selectOneRadio style="margin-right: 10px;" value="#{clienteController.telCadastro.tipo}" required="true" requiredMessage="Tipo telefone necessário">
                                <f:selectItems value="#{clienteController.tipoTelefoneSelect}" />
                            </h:selectOneRadio>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputText value="DDD:"/>
                        </div>
                        <div class="col-md-5" align="left">
                            <p:inputText value="#{clienteController.telCadastro.ddd}" required="true" requiredMessage="Informe o DDD" size="2" maxlength="2" onkeyup="mascara(this, soNumeros);"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputText value="Telefone:"/>
                        </div>
                        <div class="col-md-5" align="left">
                            <p:inputText value="#{clienteController.telCadastro.telefone}" required="true" requiredMessage="Informe o Telefone" size="8" maxlength="8" onkeyup="mascara(this, soNumeros);"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-1" align="left">

                        </div>
                        <div class="col-md-5" align="left">
                            <p:commandButton  styleClass="btn btn-mini btn-primary" action="#{clienteController.adicionarTelefone}" value="Inserir Telefone" update=":cadastroTelefone :cadastroCliente:telefones" />
                            <p:spacer height="3" width="10"/>
                            <p:commandButton  styleClass="btn btn-mini btn-primary" value="Cancelar" immediate="true" update=":cadastroTelefone" >
                                <f:setPropertyActionListener target="#{clienteController.showTelefone}" value="#{false}"/>
                            </p:commandButton>
                        </div>
                    </div>
                </h:panelGroup>
            </h:form>

            <h:form  id="formEndereco">
                <h:panelGroup rendered="#{clienteController.showEndereco}">
                    <div class="row">
                        <div class="col-md-5" align="center">
                            <h:outputText value="Cadastro Endereço" style="font-size: large;"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Tipo:" for="logradouro" />
                        </div>
                        <div class="col-md-7" align="left">
                            <h:selectOneRadio value="#{clienteController.endCadastro.logradouro}" required="true" requiredMessage="Tipo logradouro necessário" id="logradouro">
                                <f:selectItems value="#{clienteController.tipoLogradouroSelect}"/>
                            </h:selectOneRadio>
                            <p:message for="logradouro" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Nome:" for="nome" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="nome" value="#{clienteController.endCadastro.nome}" required="true" requiredMessage="Nome logradouro necessário" size="90"/>
                            <p:message for="nome" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="CEP:" for="cep" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="cep" value="#{clienteController.endCadastro.cep}" onkeyup="mascara(this, cep)" maxlength="9"/>
                            <p:message for="cep" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Bairro:" for="bairro" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="bairro" value="#{clienteController.endCadastro.bairro}" required="true" requiredMessage="Informe o bairro" size="90"/>
                            <p:message for="bairro" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Número:" for="numero" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="numero" value="#{clienteController.endCadastro.numero}" size="90"/>
                            <p:message for="numero" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Cidade:" for="cidade" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="cidade" value="#{clienteController.endCadastro.cidade}" required="true" requiredMessage="Informe a cidade" size="90"/>
                            <p:message for="cidade" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Estado:" for="estado" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputText id="estado" value="#{clienteController.endCadastro.estado}" required="true" requiredMessage="Informe o estado" size="90"/>
                            <p:message for="estado" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                            <h:outputLabel value="Complemento:" for="complemento" />
                        </div>
                        <div class="col-md-7" align="left">
                            <p:inputTextarea id="complemento" value="#{clienteController.endCadastro.complemento}" cols="95" rows="3"/>
                            <p:message for="complemento" display="icon"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" align="left">
                        </div>
                        <div class="col-md-7" align="left">
                            <p:commandButton  styleClass="btn btn-mini btn-primary" action="#{clienteController.adicionarEndereco()}" value="Inserir Endereço" update=":formEndereco :cadastroCliente:enderecos" />
                            <p:spacer height="3" width="10"/>
                            <p:commandButton  styleClass="btn btn-mini btn-primary" value="Cancelar" update=":formEndereco :cadastroCliente" immediate="true">
                                <f:setPropertyActionListener target="#{clienteController.showEndereco}" value="#{false}"/>
                            </p:commandButton>
                        </div>
                    </div>
                </h:panelGroup>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
